<template>
  <div class="content">
    <!-- <HeaderIndex :showBack="false" ></HeaderIndex> -->
    <MovieNav></MovieNav>
    <div class="content-top">
      <p class="film">最受好评电影</p>
      <div class="movie-con">
        <div
          class="movie-content"
          v-for="(v, i) in arr"
          :key="i.id"
          @click="candle(v.id)"
        >
          <div class="movie-picture">
            <img :src="v.img | fliterImg" />
            <span class="rated"
              >观众评分&nbsp;&nbsp;<span class="rated-score">{{
                v.sc
              }}</span></span
            >
          </div>
          <h3>{{ v.nm }}</h3>
        </div>
      </div>
    </div>
    <!-- 中间 -->
    <div class="space"></div>
    <!-- 下面 -->
    <div class="main-block" v-for="v in arr" :key="v.id"  @click="handle(v.id)">
      <div class="main-picture">
        <img :src="v.img | fliterImg" />
      </div>
      <div class="wrap">
        <div class="column">
          <div class="box-flex">
            <h2 class="title">{{ v.nm }}</h2>
            <span class="version"></span>
          </div>
          <div class="detail">
            <div class="score">
              <span class="score-suffix">观众评 </span>
              <span class="grade">{{ v.sc }}</span>
            </div>
            <div class="actor">主演: {{ v.star }}</div>
            <div class="show-info">{{ v.showinfo }}</div>
          </div>
        </div>
      </div>
      <div class="ticket1">
        <div class="ticket" >购票</div>
      </div>
    </div>
    <div class="bottom"></div>
    <!-- <FooterIndex></FooterIndex> -->
  </div>
</template>

<script>
import getLink from "@/api/getLink.js";

export default {
  data() {
    return {
      arr: [],
    };
  },

  mounted() {
    getLink("/apidl/movie/ry").then((res) => {
      this.arr = res.data;
      // debugger
    });
  },
  methods: {
    candle(content) {
      this.$router.push({ path: "/xiangqing", query: { dd: content } });
    },
    handle(context){
      this.$router.push({ path: "/hon", query: { sd: context } })
    }
  },
};
</script>

<style scoped>
::-webkit-scrollbar {
  width: 0;
}
.content {
  font-size: 0.25rem;
}
.content-top {
  width: 100%;
  background: #fff;
}
.film {
  padding-left: 0.3rem;
  font-size: 0.3rem;
  padding-top: 0.2rem;
}

.movie-content {
  margin-right: 0.3rem;
  margin-top: 0.3rem;
}
.movie-picture {
  position: relative;
  margin-right: 0.1rem;
}
.movie-picture img {
  width: 1.8rem;
  height: 2.2rem;
}
.movie-picture .rated {
  position: absolute;
  top: 1.8rem;
  left: 6%;
  color: #faaf00;
  font-weight: 700;
}
.movie-con {
  display: flex;
  justify-content: space-between;
  overflow-x: auto;
  margin-left: 0.3rem;
}

.movie-content h3 {
  width: 1.5rem;
  margin-top: 0.1rem;
  font-size: 0.26rem;
  font-weight: 800;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* padding-left: 0.3rem; */
}
.space {
  height: 0.2rem;
  color: #f5f5f5;
}
.main-block {
  padding-left: 0.3rem;
  padding-top: 0.2rem;
  display: flex;
  justify-content: space-between;
  position: relative;
  background: #fff;
}
.main-picture img {
  width: 1.5rem;
  height: 1.87rem;
  padding-bottom: 0.2rem;
}

.wrap {
  /* width: 4rem; */
  width: 4.3rem;
  margin-left: 0.2rem;
  /* border-bottom: 1px solid #eaeaea; */
  border-bottom: 1px solid #eaeaea;
  padding-bottom: 0.2rem;
}
.score {
  padding-top: 0.2rem;
}
.actor {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0.08rem 0;
}

.box-flex h2 {
  color: #333;
  font-weight: 700;
}
.detail {
  color: #666666;
}

.grade {
  color: #faaf00;
  font-size: 0.3rem;
  font-weight: 700;
}
.ticket1 {
  border-bottom: 1px solid #eaeaea;
  padding-bottom: 0.2rem;
}
.ticket {
  margin-right: 0.2rem;
  margin-top: 0.4rem;

  background: red;
  width: 1rem;
  height: 0.6rem;
  color: white;
  text-align: center;
  border-radius: 14%;
  line-height: 0.6rem;
  font-size: 0.25rem;
}
.bottom {
  height: 1rem;
}
</style>